import 'package:day3pm/aboutPage.dart';
import 'package:day3pm/photosPage.dart';
import 'package:day3pm/skillsPage.dart';
import 'package:day3pm/statisicPage.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var _pageController = PageController(initialPage: 0);

  var pages = [AboutPage(), StatisticPage(), PhotosPage(), SkillsPage()];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  int _pageindex = 0;

  void _onPageChanged(int index) {
    setState(() {
      _pageController.animateToPage(index,
          duration: Duration(milliseconds: 300), curve: Curves.easeInOutSine);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.pink[50],
              child: Column(
                children: [
                  Expanded(
                    flex: 1,
                    child: Image.asset(
                      "images/logo.png",
                    ),
                  ),
                  Expanded(
                    flex: 4,
                    child: Column(
                      children: [
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              _onPageChanged(0);
                            });
                          },
                          child: Container(
                            margin: const EdgeInsets.symmetric(vertical: 10),
                            padding: const EdgeInsets.symmetric(vertical: 10),
                            width: double.infinity,
                            decoration: BoxDecoration(
                                border: Border(
                                    left: BorderSide(
                                        width: _pageindex == 0 ? 4.5 : 0,
                                        color: Colors.pink)),
                                color: _pageindex == 0
                                    ? Colors.white
                                    : Colors.pink[50]),
                            child: Center(
                              child: Text(
                                'About',
                                style: TextStyle(
                                    fontSize: 20,
                                    fontWeight: _pageindex == 0
                                        ? FontWeight.w800
                                        : FontWeight.w400),
                              ),
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              _onPageChanged(1);
                            });
                          },
                          child: Container(
                            decoration: BoxDecoration(
                                border: Border(
                                    left: BorderSide(
                                        width: _pageindex == 1 ? 4.5 : 0,
                                        color: Colors.pink)),
                                color: _pageindex == 1
                                    ? Colors.white
                                    : Colors.pink[50]),
                            margin: const EdgeInsets.symmetric(vertical: 10),
                            padding: const EdgeInsets.symmetric(vertical: 10),
                            width: double.infinity,
                            child: Center(
                              child: Text(
                                'Statistic',
                                style: TextStyle(
                                    fontSize: 20,
                                    fontWeight: _pageindex == 1
                                        ? FontWeight.w800
                                        : FontWeight.w400),
                              ),
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            _onPageChanged(2);
                          },
                          child: Container(
                            decoration: BoxDecoration(
                                border: Border(
                                    left: BorderSide(
                                        width: _pageindex == 2 ? 4.5 : 0,
                                        color: Colors.pink)),
                                color: _pageindex == 2
                                    ? Colors.white
                                    : Colors.pink[50]),
                            margin: const EdgeInsets.symmetric(vertical: 10),
                            padding: const EdgeInsets.symmetric(vertical: 10),
                            width: double.infinity,
                            child: Center(
                              child: Text(
                                'Photos',
                                style: TextStyle(
                                    fontSize: 20,
                                    fontWeight: _pageindex == 2
                                        ? FontWeight.w800
                                        : FontWeight.w400),
                              ),
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            _onPageChanged(3);
                          },
                          child: Container(
                            decoration: BoxDecoration(
                                border: Border(
                                    left: BorderSide(
                                        width: _pageindex == 3 ? 4.5 : 0,
                                        color: Colors.pink)),
                                color: _pageindex == 3
                                    ? Colors.white
                                    : Colors.pink[50]),
                            margin: const EdgeInsets.symmetric(vertical: 10),
                            padding: const EdgeInsets.symmetric(vertical: 10),
                            width: double.infinity,
                            child: Center(
                              child: Text(
                                'Skills',
                                style: TextStyle(
                                    fontSize: 20,
                                    fontWeight: _pageindex == 3
                                        ? FontWeight.w800
                                        : FontWeight.w400),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          Expanded(
              flex: 9,
              child: Container(
                child: PageView(
                  scrollDirection: Axis.vertical,
                  controller: _pageController,
                  children: pages,
                  onPageChanged: (index) {
                    setState(() {
                      _pageindex = index;
                    });
                  },
                ),
              )),
        ],
      ),
    );
  }
}
